<template>
  <el-dialog v-model="state" :title="`${formData.id ? '修改' : '添加'} 户外活动`" width="600"
    :before-close="() => (state = false)">
    <!-- 内容 -->
    <el-form v-if="state" size="large" label-width="80" :model="formData" :rules="formRules" ref="formRef">
      <el-form-item label="书籍名称" prop="name">
        <el-input placeholder="请输入活动名称" v-model="formData.name" />
      </el-form-item>

      <el-form-item label="书籍类型" prop="types">
        <el-select v-model="formData.types"  placeholder="选择书籍类型">
          <el-option v-for="item in bookTypesOptions" :key="item.id" :label="item.typesName" :value="Number(item.id)">
          </el-option>
          <div v-for="item in bookTypesOptions"></div>
        </el-select>
      </el-form-item>
      <el-form-item label="评分" prop="score">
        {{ formData.score }}
      </el-form-item>
      <!-- <el-form-item label="开始日期">
        <el-date-picker type="date" v-model="formData.startDate" placeholder="请输入开始日期" value-format="YYYY-MM-DD"
          :size="size" />
      </el-form-item>
      <el-form-item label="结束日期">
        <el-date-picker type="date" v-model="formData.endDate" placeholder="请输入结束日期" value-format="YYYY-MM-DD" />
      </el-form-item> -->
      <el-form-item label="书籍说明">
        <el-input type="textarea" v-model="formData.remark" placeholder="请输入活动说明" :rows="5" />
      </el-form-item>

      <el-form-item class="btns">
        <el-button type="primary" @click="onSubmit">确定</el-button>
        <el-button type="default" @click="state = false">取消</el-button>
      </el-form-item>
    </el-form>
    <!-- 内容 -->
  </el-dialog>
</template>
<script setup>
import { reactive, ref } from 'vue'
import { listBook,addBook,updateBook } from '@/api/book/book.js'
import { listBookTypes } from '@/api/book/book_types.js'
import { ElMessage } from 'element-plus'
//自定义事件 获取父组件的 flush事件 flush = loadData()
const emit = defineEmits(['flush'])
const bookTypesOptions = ref([])
// 表单数据
const formData = ref(
  {
    name: "",
    types: "",
    score: 0,
    remark: ""
  })
const isEdit = ref(false)
// 表单验证
const formRules = reactive({
  name: [
    { required: true, message: '请输入活动名称', trigger: 'blur' },
    { min: 2, max: 20, message: '请输入2~20个字符', trigger: 'blur' }
  ],
  types: [
    { required: true, message: '请选择书籍类型', trigger: 'blur' },
  ],

})
// 提交验证
const formRef = ref()

const onSubmit = () => {
  formRef.value.validate(async (isSuccess) => {
    if (isSuccess) {
      //请求接口 新增接口 或 修改接口
      let r;
      if (formData.value.id) {
        // formData.value.startDate = null;
        // formData.value.endDate = null;
        r = await updateBook(formData.value)
      } else {

        r = await addBook(formData.value)
      }
      console.log(JSON.stringify(r))
      if (r.code == 200) {
        ElMessage({ type: 'success', message: '操作成功' })
        state.value = false;
        // emit 调用父组件中的 flush -> loadData()方法, 让父亲刷新处理整个页面，即 局部引发全局的变化
        emit('flush');
      } else {
        ElMessage({ type: 'info', message: '操作失败' })
      }
    }
  })
}
// 对话框状态
const state = ref(false)

// 暴露
defineExpose({
  state,
  isEdit,
  formData,
  bookTypesOptions
})
</script>
